<template>
  <div class="select-companyList">
    <div class="plat-content" @click="showSelect">
        <div>全部枇杷种植企业</div>
        <a-icon type="up-circle" />
    </div>
     <div v-if="show" class="slect-content">
          <template v-for="(item,index) in companyList">
            <div :key="item.id" class="slect" @click="choose(item,index)" :class="showIndex===index?'choosed':''">
                 <div class="name" :title="item.principalName">{{item.principalName}}</div>
                <a-icon type="right" :key="index" style="font-size:12px" />
            </div>
          </template>
        </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import {getDataScreenToken} from '@/api/dashboards'
export default {
  props: {
    companyList:{
      type:Array
    }
  },
  data() {
    return {
         showIndex:undefined,
         show:false,
       }
  },
  watch: {
     companyList:{
          immediate:true,
          handler: function(val) {
              if(val){
              }
          },
    },
  },
  created(){
  },
  methods: {
    ...mapGetters(['token']),
     async getDataScreenToken(subjectId) { //获取耘田token
        let res = await getDataScreenToken({subjectId:subjectId})
        if(res.success){
          window.open(`http://8.140.154.124:10203/ssoLogin?type=2&token=${res.result.token}&accountId=${res.result.accountId}`)
        }else {
          this.$message.warning(res.message)
        }
    },
    showSelect(){
      this.show = !this.show
    },
    choose(data,index){
      this.showIndex = index
      this.getDataScreenToken(data.id)
    }
  },
}
</script>
<style lang="less" scoped>
.select-companyList{
    ::-webkit-scrollbar {
      width: 4px;
      height: 8px;
    }
    ::-webkit-scrollbar-track {
        background: #0d99c240;
        border-radius: 2px;
    }
    ::-webkit-scrollbar-thumb {
        background: #ffffff69;
        border-radius: 2px;
    }
    color: #FFFFFF;
    .plat-content{
        width: 160px;
        height: 36px;
        background: #0D99C2;
        border-radius: 3px 3px 0px 0px;
        font-size: 14px;
        font-weight: 400;
        padding: 0 12px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .slect-content{
      height: 112px;
      overflow: hidden;
      overflow-y: scroll;
      .slect{
        // width: 160px;
        height: 36px;
        font-size: 13px;
        background: rgba(13, 153, 194, 0.85);
         padding: 0 12px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .name{
          max-width: 120px;
          text-align: center;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
      .choosed{
        background:rgba(13, 135, 178, 1) ;
      }
    }
 
}
</style>